<template>
    <div class="page">
        <formHeader title="物流信息" newColor></formHeader>
            <div class="head" >
                <img v-if="data" :src="data.logo" alt="">
                <div class="box">
                    <div v-if="data" class="top">物流公司：<span class="txt" style="color:#333;">{{data.expName}}</span></div>
                    <div class="btm">物流单号：<span class="txt">{{logNo}}<span @click="clip" :data-clipboard-text="logNo" class="copy">复制</span></span></div>
                </div>
            </div>
            <div class="main" v-if="data">
                <div class="title">物流跟踪</div>
                <div class="box">
                    <div  v-for="(item,i) in data.list" :key="i" :class="['content',i==0?'content1':'']">
                        <div class="solid"></div>
                        <div class="circle"></div>
                        <p class="name">{{item.status}}</p>
                        <p class="info">{{item.time}}</p>
                    </div>
                </div>
            </div>
        <div v-else class="main">
            <img src="./null.png" alt="">
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {logistics} from "../../api/order"
    import ClipboardJS from 'clipboard'
    import * as Dialog from '@/dialog'

    export default {
        name: "expressInfo",
        components: {formHeader},
        data() {
            return {
                data:[],
                logNo:null
            }
        },
        activated(){
            this.logNo = this.$route.query.logNo
            if(this.$route.query.logNo){
                logistics(this.$route.query.logNo).then((res)=>{
                    this.data = res.data
                 })

            } else{
                this.data = []
                return
            }
        },
        computed:{
        },
        mounted() {
        },
        created(){
        },
        methods: {
            clip() {
                var clipboard = new ClipboardJS('.copy')
                clipboard.on('success', e => {

                    e.clearSelection()
                    Dialog.showCorrect("复制成功!")
                })

            },
        }

    }
</script>

<style scoped lang="stylus">
.page
    background-color #F4F3F3
    height 100%
    .head
        margin 48px 0 10px
        height 72px
        width 100%
        background-color #ffffff
        display flex
        align-items center
        img
            display inline-block
            width 55px
            height 55px
            border-radius 5px
            margin 0 10px
        .box
            font-size 14px
            height 55px
            color #999
            position: relative;
            flex 1
            margin-right 15px
            .top
                position absolute
                top 5px
            .btm
                position absolute
                bottom 5px
                .txt
                    color #333
                    .copy
                        background-color #00d6c0
                        color #fff
                        font-size 11px
                        padding 2px 7px
                        border-radius 2px
                        margin-left  20px
    .main
        min-height 100%
        background-color #ffffff
        padding 15px
        position: relative;
        img
            width 350px
            height 350px
            display inline-block
            position absolute
            left 50%
            top 50%
            transform translate(-50%,-50%)
        .title
            color #333
            font-size 15px
            font-weight 500
        .box
            margin-top 40px
            display flex
            overflow hidden
            flex-direction: column;
            .content
                padding-bottom 40px
                padding-left 30px
                position: relative;
                .circle
                    position absolute
                    left 0
                    top 0
                    width 16px
                    height 16px
                    background-color #dddddd
                    border-radius 50%
                    z-index 2
                .name
                    font-size 15px
                    color #888
                    flex 1
                    line-height: 1.4;
                .info
                    margin-top 8px
                    font-size 12px
                    flex 1
                    color #aaa
                .solid
                    width 2px
                    height 500%
                    position absolute
                    top 0
                    left 7px
                    background-color #dddddd
                    transform: translateY(-100%);
                    -webkit-transform: translateY(-100%);
                    -moz-transform: translateY(-100%);
                    -ms-transform: translateY(-100%);
                    -o-transform: translateY(-100%);

            .content1
                .name
                    flex 1
                    color #00d6c0
                .circle
                    left 1px
                    width 14px
                    height 14px
                    background-color #00d6c0
</style>
